<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery仿新浪微博图片文字列表间歇上下滚动淡进淡出滚动</title>
<meta name="description" content="jquery仿新浪微博图片文字列表上下淡进淡出间歇上下滚动，一款实用的jQuery图文滚动插件，图片文字列表间歇上下滚动效果。" />
<style type="text/css" media="screen">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.demo{width:500px;margin:30px auto 0 auto;}
.demo h2{font-size:16px;color:#333;height:52px;line-height:24px;}
/* sidebar */
#sidebar{color:#AFB0B1;background:#0D171A;float:left;margin:0 0 24px;padding:15px 10px 10px;width:300px;}
#sidebar li{height:90px;overflow:hidden;}
#sidebar li h5{color:#A5A9AB;font-size:1em;margin-bottom:0.5em;}
#sidebar li h5 a{color:#fff;text-decoration:none;}
#sidebar li img{float:left;border:solid 3px #fff;margin-right:8px;display:inline;}
#sidebar li .info{color:#B1B1B1;font-size:1em;}
#sidebar .spyWrapper{height:100%;overflow:hidden;position:relative;}
</style>
<script type="text/javascript" src="http://www.jsfoot.com/skin/js/jquery.js"></script>
<script type="text/javascript">
(function($){ 
	$.fn.simpleSpy = function (limit, interval){
		limit = limit || 4;
		interval = interval || 4000;

		return this.each(function(){
			// 1. 设置
			// 捕获所有的列表项的缓存
			// 列表限制li元素
			var $list = $(this),
			items = [], // 未初始化
			currentItem = limit,
			total = 0, // 初始化以后
			height = $list.find('> li:first').height();

			// 捕获缓存
			$list.find('> li').each(function(){
				items.push('<li>' + $(this).html() + '</li>');
			});

			total = items.length;

			$list.wrap('<div class="spyWrapper" />').parent().css({height : height * limit});

			$list.find('> li').filter(':gt(' + (limit - 1) + ')').remove();

			// 2. 效果        
			function spy(){
				// 插入一个新的项目，透明度和高度为零
				var $insert = $(items[currentItem]).css({height : 0,opacity : 0,display : 'none'}).prependTo($list);

				// 褪色的最后一个事件
				$list.find('> li:last').animate({ opacity : 0}, 1000, function(){
					// 增加新的第一个项目的高度
					$insert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000);
					$(this).remove();
				});

				currentItem++;
				if(currentItem >= total){
					currentItem = 0;
				}
				setTimeout(spy, interval)
			}

			spy();
		});
	};   
})(jQuery);
</script>

<script type="text/javascript">
$(document).ready(function(){
	$('ul.spy').simpleSpy();
});
</script>

</head>
<body>

<div class="demo">

	<h2>jquery仿新浪微博图片文字列表间隙滚动淡进淡出滚动</h2>

	<div id="sidebar">
		<ul class="spy">
			<li>
				<a href="http://www.17sucai.com/" title="View round"><img width="70" height="70" src="images/1.png" title="" /></a>
				<h5><a href="http://www.17sucai.com/" title="View round">round</a></h5>
				<p class="info">Nov 29th 2008 by neue</p>
			</li>
			<li>
				<a href="http://www.17sucai.com/" title="View reflet"><img width="70" height="70" src="images/2.png" title="" /></a>
				<h5><a href="http://www.17sucai.com/" title="View reflet">reflet</a></h5>
				<p class="info">Nov 29th 2008 by neue</p>
			</li>
			<li>
				<a href="http://www.17sucai.com/" title="View Kate Moross Little Big Planet"><img width="70" height="70" src="images/3.png" title="" /></a>
				<h5><a href="http://www.17sucai.com/" title="View Kate Moross Little Big Planet">Kate Moross Little Big Planet</a></h5>
				<p class="info">Nov 29th 2008 by neue</p>
			</li>
			<li>
				<a href="http://www.17sucai.com/" title="View Untitled"><img width="70" height="70" src="images/4.png" title="" /></a>
				<h5><a href="http://www.17sucai.com/" title="View Untitled">Untitled</a></h5>
				<p class="info">Nov 29th 2008 by mike1052</p>
			</li>
			<li>
				<a href="http://www.17sucai.com/" title="View My Tutorial's Library"><img width="70" height="70" src="images/5.png" title="" /></a>
				<h5><a href="http://www.17sucai.com/" title="View My Tutorial's Library">My Tutorial's Library</a></h5>
				<p class="info">Nov 29th 2008 by FrancescoOnAir</p>
			</li>
			<li>
				<a href="http://www.17sucai.com/" title="View Sandy &mdash; your free personal email assistant - Log in"><img width="70" height="70" src="images/6.png" title="" /></a>
				<h5><a href="http://www.17sucai.com/" title="View Sandy &mdash; your free personal email assistant - Log in">Sandy &mdash; your free</a></h5>
				<p class="info">Nov 29th 2008 by John Doe</p>
			</li>
			<li>
				<a href="http://www.17sucai.com/" title="View Sandy &mdash; your free personal email assistant - Log in"><img width="70" height="70" src="images/7.png" title="" /></a>
				<h5><a href="http://www.17sucai.com/" title="View Sandy &mdash; your free personal email assistant - Log in">Sandy &mdash; your free</a></h5>
				<p class="info">Nov 29th 2008 by John Doe</p>
			</li>
			<li>
				<a href="http://www.17sucai.com/" title="View Sandy &mdash; your free personal email assistant"><img width="70" height="70" src="images/8.png" title="" /></a>
				<h5><a href="http://www.17sucai.com/" title="View Sandy &mdash; your free personal email assistant">Sandy &mdash; your free</a></h5>
				<p class="info">Nov 29th 2008 by John Doe</p>
			</li>
			<li>
				<a href="http://www.17sucai.com/" title="View Values of n Blog"><img width="70" height="70" src="images/9.png" title="" /></a>
				<h5><a href="http://www.17sucai.com/" title="View Values of n Blog">Values of n Blog</a></h5>
				<p class="info">Nov 29th 2008 by John Doe</p>
			</li>
		</ul>
	</div>
	  
</div>

</body>
</html>